:host {
    /* Custom CSS variables for reusing style in this component and child components */
    --primary-color: #e3df00;
    --primary-color-alt-shade: #a7a400;
    --secondary-color: #020024;
    --secondary-color-alt-shade: #343304;
    --base-text-color: #ffffff;

    /* Card styling hooks */
    --slds-c-card-color-background: linear-gradient(
        115deg,
        var(--secondary-color) 60%,
        var(--primary-color-alt-shade) 100%
    );
    --slds-c-card-text-color: var(--primary-color);
    --slds-c-card-radius-border: 1.5rem 0;
    --slds-c-card-color-border: var(--primary-color);
    --slds-c-card-footer-color-border: var(--primary-color-alt-shade);

    /* Toggle styling hooks */
    --slds-c-checkbox-toggle-color-border-checked: #009900;
    --sds-c-checkbox-toggle-color-background-checked: #009900;
    --slds-c-checkbox-toggle-color-background-checked-focus: #00cc00;
    --slds-c-checkbox-toggle-color-background-hover: var(
        --primary-color-alt-shade
    );
    --slds-c-checkbox-toggle-color-border-hover: var(--primary-color);

    /* Button styling hooks */
    --slds-c-button-text-color: var(--primary-color);
    --slds-c-button-text-color-hover: var(--primary-color-alt-shade);
    --slds-c-button-text-color-active: var(--secondary-color);
    --slds-c-button-neutral-color-background: var(--secondary-color);
    --slds-c-button-neutral-color-background-hover: var(
        --secondary-color-alt-shade
    );
    --slds-c-button-neutral-color-background-active: var(--primary-color);
    --slds-c-button-neutral-color-border: var(--primary-color);
    --slds-c-button-neutral-color-border-hover: var(--primary-color-alt-shade);
    --slds-c-button-neutral-color-border-active: var(
        --secondary-color-alt-shade
    );

    /* View source component styling hooks */
    --source-text-color: var(--base-text-color);
    --source-link-color: var(--primary-color);
    --source-link-color-hover: var(--primary-color-alt-shade);
}

/* A specific style for a toggle base component */
.toggle-red {
    --slds-c-checkbox-toggle-color-border-checked: #990000;
    --sds-c-checkbox-toggle-color-background-checked: #990000;
    --slds-c-checkbox-toggle-color-background-checked-focus: #cc0000;
}
